<?php $this->template->add_css_admin(array(
								'css/colorpicker.css',
								'css/datepicker.css',
								'css/icheck/flat/blue.css',
								'css/select2.css',
								'css/unicorn.main.css',
								'css/unicorn.grey.css',
								'css/fileinput.css',
								'css/my_css.css',
								)); 
?>
<?php ob_start();?>
<style type="text/css">
	.ui-autocomplete.ui-menu.ui-widget.ui-widget-content.ui-corner-all{background-color: white;border: 1px solid rgb(203, 176, 176);width: 53%;	padding: 10px 20px 10px 20px;}
	.ui-autocomplete.ui-menu.ui-widget.ui-widget-content.ui-corner-all li{list-style-type: none;padding-left: 0;}
	#relate_list li:before { counter-increment:section; content: counter(section)  "." ; padding-right: 10px;}
	#relate_list { list-style-type: none; margin: 0; padding: 0;width: 707px }
	#relate_list li {border: 1px solid #ededed; background-color: white; overflow: hidden;line-height: 20px;margin: 6px 3px 3px 3px;padding: 0.4em;padding-left: 1.5em;height: 33px;}
	#relate_list li span { position: absolute; margin-left: -1.3em; }
	i.error {cursor: pointer;float: right;}
	#relate_list li:hover {cursor: move;}
</style>
<?php $this->template->add_raw_html(ob_get_clean(),'tmp_css');?>
<div class="container-fluid">
		<div class="row">
		<div class="col-12">
			<div class="widget-box">
				<div class="widget-title">
					<span class="icon">
						<i class="glyphicon glyphicon-align-justify"></i>									
					</span>
					<h5>Thông tin bài viết</h5>
				</div>
				<div class="widget-content nopadding">
					<form method="post" class="form-horizontal" enctype="multipart/form-data">
						<input type="hidden" name="edit[sli_id]" value="<?php echo (isset($edit->sli_id) && $edit->sli_link != 0)?$edit->sli_link:0;?>"/>
						<div class="form-group">
							<label class="control-label">Tiêu đề</label>
							<div class="controls">
								<input name='edit[sli_title]' id="sli_title" value="<?php echo @$edit->sli_title;?>" type="text" class="form-control input-small" />
							</div>
						</div>
						<div class="form-group">
							<label class="control-label">Liên kết</label>
							<div class="controls">
								<input name='edit[sli_link]' id="sli_link" value="<?php echo @$edit->sli_link;?>" type="text" class="form-control input-small" />
							</div>
						</div>
						<div class="form-group">
							<label class="control-label">Mô tả</label>
							<div class="controls">
								<textarea name='edit[sli_description]' class="form-control"><?php echo @$edit->sli_description;?></textarea>
							</div>
						</div>

						<div class="form-group">
							<label class="control-label">Hình đại diện</label>
							<div class="controls" style='width: 718px;'>
								<input id="file-0"  name='pos_name' type="file" class="file-loading" data-upload-url="<?php echo $this->url_index.'/upload_image/'.$edit->sli_id;?>" data-max-file-count="10">
								<input type="hidden" id="pos_image_path" name="edit[sli_img]" value="<?php echo @$edit->sli_img?>"
							</div>
						</div>

						<div class="form-group">
							<label class="control-label">Trạng thái</label>
							<div class="controls">
								<select name="edit[sli_status]">
									<option value='0' <?php echo @$edit->sli_status==0?'selected':'';?> >Nháp</option>
									<option value='1' <?php echo @$edit->sli_status==1?'selected':'';?> >Xuất bản</option>
								</select>
							</div>
						</div>

						<div class="form-actions">
							<button type="submit" class="btn btn-primary btn-small">Save</button> or <a class="text-danger" href="#">Cancel</a>
						</div>
					</form>
				</div>
			</div>						
		</div>
	</div>
</div>

<?php
 $this->template->add_js_admin(array('js/bootstrap-colorpicker.js',
										'js/bootstrap-datepicker.js',
										'js/jquery.icheck.min.js',
										'js/select2.min.js',
										'js/unicorn.form_common.js',
										'ckeditor/ckeditor.js',
										'js/fileinput.js',
										)); 
?>
<?php ob_start();?>	
<script type="text/javascript">
	function _remove(el){
		$(el).parent().remove();
	}
	function _delete(el){
		var parent = $(el).closest('.file-preview-frame');
		var img = parent.find('img');
		console.log(img.attr('src'));
	}

	$(function (){
		$("#file-0").fileinput({
			uploadUrl: "' . Url::to(['<?php echo $this->url_index.'/upload_image/'.$edit->sli_id;?>']) . '",
		    maxFileCount: 10,
		    overwriteInitial: true,
		    uploadExtraData: { img_path: '<?php echo @$edit->sli_img;?>'},
		    <?php if(isset($edit->sli_img) && $edit->sli_img != ''){?>
		    initialPreview: [
		        '<img src="<?php echo $edit->sli_img;?> " class="file-preview-image">',
		    ],
		    initialPreviewConfig: [
		        {caption: "Desert.jpg", width: "120px", url:"/site/file-delete", key:1},
		        {caption: "Tulips.jpg", width: "120px", url:"<?php echo $this->url_index.'/upload_image/'.$edit->sli_id;?>", key:2}
		    ],
		    <?php }?>
	       
	    }).on('fileuploaded', function(event, data, previewId, index) {
		    $("#pos_image_path").val(data.response.file_path);
		});

	    var mapping = [];
	    var source = [];
		$( "#autocomplete" ).autocomplete({
			minLength : 1,
			source: function( request, response ) {
				$.ajax({
					url: "<?php echo $this->url_index.'/do_ajax_search';?>",
					dataType: "json",
					data: {
						q: request.term , pos_id : <?php echo $edit->sli_id;?>,
					},
					type :'POST',
					success: function( data ) {
						source = [];
						$.each(data,function(i,item){
							source.push(item.pos_title);
							mapping[item.pos_title] = item.pos_id;
						});
						response(source);
					}
				});
			},
			select: function( event, ui ) {
				$('#relate_list').append('<li  class="ui-state-default" data-id="'+mapping[ui.item.label]+'"> <i class="error glyphicon glyphicon-remove" onclick="_remove(this);" title="Xóa">&nbsp;</i>'+ui.item.label+'</li>');
				setTimeout(function(){$('#autocomplete').val('');}, 200);
	        },
			open: function() {
				$( this ).removeClass( "ui-corner-all" ).addClass( "ui-corner-top" );
			},
			close: function() {
				$( this ).removeClass( "ui-corner-top" ).addClass( "ui-corner-all" );
			}
		});
		$('form').submit(function(){
			var list = [];
			$('#relate_list li').each(function (index, item){
				list.push($(item).attr('data-id'));
			});
			$('#relate_list_data').val(list.join(';'));
		})
	});
</script>
<?php $this->template->add_raw_html(ob_get_clean()); ?>


